<template>
  <div class="container-fild">
    <div class="content">
      <div class="r-nav">
        <span>
          <i class="iconfont icon-shouye"></i>
          <a href="#" @click.prevent="toUser">天猫首页</a>
        </span>
        <span> 欢迎来到天猫 </span>
        <span><a href="#" @click.prevent="toLogin">登录</a></span>
        <span><a href="#" @click.prevent="toRegister">免费注册</a></span>
      </div>
      <div class="l-nav">
        <ul class="nav">
          <li :class="{ bg: show }">
            <a
              @mouseenter="show = !show"
              @mouseleave="show = !show"
              href="#"
              style="display: block"
              >我的淘宝</a
            >
            <ul class="li-item" v-show="show">
              <li>已买到的宝贝</li>
              <li>已卖出的宝贝</li>
            </ul>
          </li>

          <li>
            <i class="iconfont icon-gouwuchefill"></i>
            <a href="#" @click.prevent="toshopcart">购物车</a>
          </li>
          <li
            @mouseenter.stop.self="show1 = !show1"
            @mouseleave="show1 = !show1"
            :class="{ bg: show1 }"
          >
            <a href="#">收藏夹 </a>
            <ul class="li-item" v-show="show1">
              <li>收藏的宝贝</li>
              <li>收藏的店铺</li>
            </ul>
          </li>
          <li class="hr"></li>
          <li
            @mouseenter.self="show2 = !show2"
            @mouseleave="show2 = !show2"
            :class="{ bg: show2 }"
          >
            <i class="iconfont icon-shouji"></i>
            <a href="#">手机版</a>
            <div class="two" v-show="show2">
              <div class="top"></div>
              <img
                src="~assets/image/two.png"
                style="width: 150px; height: 150px"
                alt=""
              />
              <p>到天猫app</p>
              <p>新人享0.01好货</p>
            </div>
          </li>
          <li><a href="#">淘宝网</a></li>
          <li><a href="#">网页无障碍</a></li>
          <li><a href="#">商家支持</a></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
//导入路由
import { useRouter } from "vue-router";
export default {
  name: "TopNav",

  setup() {
    let show = ref(false);
    let show1 = ref(false);
    let show2 = ref(false);
    //使用路由
    const router = useRouter();
    //跳转到登录
    const toLogin = () => {
      router.push({
        path: "/login",
      });
    };
    //跳转到注册
    const toRegister = () => {
      router.push({
        path: "/register",
      });
    };
    //跳转到购物车
    const toshopcart = () => {
      router.push({
        path: "/shopcart",
      });
    };
    //跳转到首页
    const toUser = ()=>{
      router.push({path:'/'})
    }
    return {
      toUser,
      toshopcart,
      toRegister,
      toLogin,
      show,
      show1,
      show2,
    };
  },
};
</script>
<style scoped>
@import "assets/css/Topnav.css";
</style>